import React, { Component } from 'react';
import { Calendar } from 'antd-mobile';
import { formatDate } from '@/assets/js/methods'
import "./OrderProgress.scss"
import "./Shippingrecord.scss"

const now = new Date();
class Shippingrecord extends Component {
	originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
	constructor() {
		super()
		this.state = {
			val: 1,
			show: false,
			config: {
				type: 'one',
				startTime: ''
			},
		}
		this.hastopbar = true
	}
	onSelectHasDisableDate = (dates) => {
		console.warn('onSelectHasDisableDate', dates);
	}

	onConfirm = (startTime) => {
		console.log(startTime.getTime())
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime: formatDate(startTime.getTime())
		});
	}

	onCancel = () => {
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime: undefined,
			endTime: undefined,
		});
	}
	componentDidMount() {
		document.getElementsByTagName('title')[0].innerHTML = '出货记录'
		this.setState({
			startTime: formatDate(new Date().getTime())
		})
	}
	render() {
		let height = window.screen.height
		return (
			<div className="other-page OrderProgress shippingrecord" style={{ minHeight: height + 'px' }}>
				{
					this.hastopbar ?
						<div className="topbar flex y-center space-between">
							<span className="flex y-center">
								<span>日期选择:</span>
							</span>
							<span className="flex y-center">
								<span>{this.state.startTime}</span>
								<img src={require('../../images/calendar.png')}
									alt=""
									className="ml20"
									onClick={() => {
										document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
										this.setState({
											show: true
										});
									}} />
							</span>
						</div>
						: null
				}

				<div className='productbox border-b'>
					<div style={{
						width: 16,
						height: 16,
						borderRadius: 8,
						border: '1px solid #afafaf',
						borderColor: this.state.fouced ? '#4d638c' : '#afafaf',
						backgroundColor: this.state.fouced ? '#4d638c' : 'transparent',
						marginRight: 5
					}}></div>
					<div>
						<img
							className='proimg'
							src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg' alt="" />
					</div>
					<div className='right' >
						<div className='title'>净水器家用直饮厨房净水机不锈钢台式过滤器</div>
						<div className='count'>
							<div className='stock'>库存 3件</div>
							<div className='countbox'>
								<div
									style={{ flex: 1, border: '1px solid #eee', cursor: 'pointer' }}
									onClick={() => {
										if (this.state.val > 0) {
											this.setState({
												val: this.state.val - 1
											})
										} else {
											this.setState({
												val: 0
											})
										}
									}}
								>-</div>
								<div style={{ flex: 1, borderTop: '1px solid #eee', borderBottom: '1px solid #eee' }}>{this.state.val}</div>
								<div
									style={{ flex: 1, color: '#f95f5c', border: '1px solid #eee', cursor: 'pointer' }}
									onClick={() => {
										this.setState({
											val: this.state.val + 1
										})
									}}
								>+</div>
							</div>
						</div>
						<div className='originalprice'>￥5988 ￥388/月</div>
						<div className='currentprice'>￥2988 ￥188/月</div>
					</div>
				</div>

				<div className='footer'>
					<div style={{ display: 'flex', flex: 1, paddingLeft: 15 }}>
						<div style={{
							width: 16,
							height: 16,
							borderRadius: 8,
							border: '1px solid #afafaf',
							borderColor: this.state.fouced ? '#1abc9c' : '#afafaf',
							marginRight: 5,
							cursor: 'pointer',
							backgroundColor: this.state.fouced ? '#4d638c' : 'transparent'
						}}
							onClick={() => {
								this.setState({
									fouced: !this.state.fouced
								})
							}}></div>
						全选
					</div>
					<div style={{ display: 'flex', flexDirection: 'row', flex: 1, justifyContent: 'center' }}>
						合计
					<div style={{ color: '#f95f5c', marginLeft: 5 }}>¥ 0</div>
					</div>
					<div className='button'>结算</div>
				</div>

				<Calendar
					{...this.state.config}
					visible={this.state.show}
					onCancel={this.onCancel}
					onConfirm={this.onConfirm}
					onSelectHasDisableDate={this.onSelectHasDisableDate}
					getDateExtra={this.getDateExtra}
					defaultDate={now}
					minDate={new Date(+now - 5184000000)}
					maxDate={new Date(+now + 31536000000)}
				/>
			</div>
		);
	}
}

export default Shippingrecord;